<div class="row">
    <div class="col-xs-12">
        <div class="card card-banner card-chart card-green">
            <div class="card-header">
                <div class="card-title">
                    <div class="title">Top Sale Today</div>
                </div>
                <ul class="card-action">
                    <li>
                        <a href="/">
                            <i class="fa fa-refresh"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body no-padding">
                <chartist class="ct-chart ct-chart-sale"
                          chartist-data="vm.saleChart.data"
                          chartist-chart-options="vm.saleChart.config"
                          chartist-responsive-options="vm.saleChart.responsive"
                          chartist-chart-type="Line"></chartist>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <a href="#">
            @@include('../../elements/card/banner.html',{
            "value": "{{vm.sales.today.value}}",
            "sign": "$",
            "title": "{{vm.sales.today.title}}",
            "icon": "fa fa-shopping-basket",
            "classname": "card-green-light"
            })
        </a>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <a href="#">
            @@include('../../elements/card/banner.html',{
            "value": "{{vm.sales.like.value}}",
            "sign": "",
            "title": "{{vm.sales.like.title}}",
            "icon": "fa fa-thumbs-o-up",
            "classname": "card-blue-light"
            })
        </a>
    </div>
    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
        <a href="#">
            @@include('../../elements/card/banner.html',{
            "value": "{{vm.sales.registration.value}}",
            "sign": "",
            "title": "{{vm.sales.registration.title}}",
            "icon": "fa fa-user-plus",
            "classname": "card-yellow-light"
            })
        </a>
    </div>
</div>

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="card card-mini">
            <div class="card-header">
                <div class="card-title">Last Statuses</div>
                <ul class="card-action">
                    <li>
                        <a href="/">
                            <i class="fa fa-refresh"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body no-padding">
                <table class="table card-table">
                    <thead>
                    <tr>
                        <th>Products</th>
                        <th>Amount</th>
                        <th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>MicroSD 64Gb</td>
                        <td class="right">12</td>
                        <td><span class="badge badge-success badge-icon"><i class="fa fa-check"
                                                                            aria-hidden="true"></i><span>Complete</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>MiniPC i5</td>
                        <td class="right">5</td>
                        <td><span class="badge badge-warning badge-icon"><i class="fa fa-clock-o"
                                                                            aria-hidden="true"></i><span>Pending</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Mountain Bike</td>
                        <td class="right">1</td>
                        <td><span class="badge badge-info badge-icon"><i class="fa fa-credit-card"
                                                                         aria-hidden="true"></i><span>Confirm Payment</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Notebook</td>
                        <td class="right">10</td>
                        <td><span class="badge badge-danger badge-icon"><i class="fa fa-times"
                                                                           aria-hidden="true"></i><span>Cancelled</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Raspberry Pi2</td>
                        <td class="right">6</td>
                        <td><span class="badge badge-primary badge-icon"><i class="fa fa-truck"
                                                                            aria-hidden="true"></i><span>Shipped</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>Flashdrive 128Mb</td>
                        <td class="right">40</td>
                        <td><span class="badge badge-info badge-icon"><i class="fa fa-credit-card"
                                                                         aria-hidden="true"></i><span>Confirm Payment</span></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <div class="card card-tab card-mini">
            <uib-tabset>
                <uib-tab index="0" heading="Browsers" select="vm.chartReload()">
                    <div class="row">
                        <div class="col-sm-8">
                            <chartist class="ct-chart ct-chart-browser ct-perfect-fourth"
                                      chartist-data="vm.browserChart.data"
                                      chartist-chart-options="vm.browserChart.config"
                                      chartist-chart-type="Pie"></chartist>
                        </div>
                        <div class="col-sm-4">
                            <ul class="chart-label">
                                <li class="ct-label ct-series-a">Google Chrome</li>
                                <li class="ct-label ct-series-b">Firefox</li>
                                <li class="ct-label ct-series-c">Safari</li>
                                <li class="ct-label ct-series-d">IE</li>
                                <li class="ct-label ct-series-e">Opera</li>
                            </ul>
                        </div>
                    </div>
                </uib-tab>
                <uib-tab index="1" heading="Operating System" select="vm.chartReload()">
                    <div class="row">
                        <div class="col-sm-8">
                            <chartist class="ct-chart ct-chart-os ct-perfect-fourth" chartist-data="vm.osChart.data"
                                      chartist-chart-options="vm.osChart.config" chartist-chart-type="Pie"></chartist>
                        </div>
                        <div class="col-sm-4">
                            <ul class="chart-label">
                                <li class="ct-label ct-series-a">iOS</li>
                                <li class="ct-label ct-series-b">Android</li>
                                <li class="ct-label ct-series-c">Windows</li>
                                <li class="ct-label ct-series-d">OSX</li>
                                <li class="ct-label ct-series-e">Linux</li>
                                <li class="ct-label ct-series-f">Chrome OS</li>
                            </ul>
                        </div>
                    </div>
                </uib-tab>
            </uib-tabset>
        </div>
    </div>
</div>

@@include('../../elements/footer/footer.html')